<template>
    <div class="navbar">
        <div class="left" @click="change"><slot name="left">
            <img src="~assets/img/BILIBILI_LOGO.png">
        </slot></div>
        <div class="center"><slot name="center">
      <span>
        <img src="~assets/img/search.png" alt="">
      </span>
        </slot></div>
        <div class="right"><slot name="right">
      <span @click="$router.push('/userInfo')">
      <img v-if="userData.user_img!=null" :src="userData.user_img" alt="">
      <img v-else src="~assets/img/default_img.jpg" alt="">
      </span>
            <div><a href="http://d.bilibili.com/download_app.html?preUrl=http%3A%2F%2Fm.bilibili.com%2Findex.html&schema=bilibili%3A%2F%2Fhome%3Ftab_name%3D%E7%83%AD%E9%97%A8&">下载 App</a></div>
        </slot></div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "navbar",
        computed:{
            ...mapState(['userData'])
        },
        methods:{
            change(){
                if (this.$router.history.current.path!='/home'){
                    this.$router.push('/home')
                }
            },
            getData(){
                this.$store.commit('getData')
            },
        },
        created() {
            this.getData()
        }
    };
</script>

<style scoped>
    .navbar {
        height: 12.222vw;
        background-color: white;
        display: flex;
        position: sticky;
        top: 0px;
        z-index: 999999;
    }
    .navbar div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4.444vw;
    }
    .navbar .right{
        width: 100px;

    }
    .left img{
        width: 15.278vw;
        padding-right: 7.778vw;
    }
    .right img{
        width: 6.111vw;
        border-radius: 50%;
        padding-right: 3.611vw;
    }
    a{
        color: white;
    }
    .right div{
        background-color: #fb7299;
        color: white;
        width: 18.056vw;
        height: 6.111vw;
        font-size:3.333vw;
        border-radius: 0.556vw;
        margin-right: 2.778vw;
    }
    .center img {
        width: 6.667vw;
        margin-top: 1.945vw;
        margin-left: 15.278vw;
    }
</style>
